Summary

Add a second CSS export (styles-tailwind.css) for projects that already have Tailwind installed.

Problem

When consumers with Tailwind v3 import @godaddy/react/styles.css, they get:

@layer base is used but no matching @tailwind base directive is present

This happens because Tailwind v3's PostCSS plugin sees the compiled @layer base block and expects a corresponding @tailwind base directive.

Solution

Ship two CSS exports:

The tailwind version uses:

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" source(none);

This includes theme mappings and utilities but not the base/preflight layer.

Usage

// For Tailwind projects
import '@godaddy/react/styles-tailwind.css';

// For non-Tailwind projects  
import '@godaddy/react/styles.css';

Notes

• Import from JS, not inside your Tailwind CSS file
• Import after your app's Tailwind CSS for correct cascade order
• Theme customization via --gd-* CSS variables